<template>
	<div class="tabTags text-left">
		<a-space>
			<a-tag
				:color="tabsType == item.itemValue ? color : ''"
				v-for="(item, index) in list"
				:key="index"
				@click="tabChange(item.itemValue)"
				:style="{ borderRadius: borderRadius, border: border, height: height, lineHeight: height, padding: '0 15px' }"
				:disabled="isdisabled"
			>
				{{ item.itemText }}
			</a-tag>
		</a-space>
	</div>
</template>

<script>
export default {
	name: 'tabsBtn',
	props: {
		tabsType: {
			type: [String, Number],
			default: ''
		},
		list: {
			type: Array,
			default: () => []
		},
		isdisabled: {
			type: Boolean,
			default: false
		},
		borderRadius: {
			type: String,
			default: '4px'
		},
		color: {
			type: String,
			default: '#0A8783'
		},
		border: {
			type: String,
			default: '1px soild #0A8783'
		},
		height: {
			type: String,
			default: '40px'
		}
	},
	data() {
		return {
			tabslist: this.list
			// tabsType: this.type
		};
	},
	model: {
		// 使用model， 这儿2个属性，prop属性说，我要将msg作为该组件被使用时（此处为aa组件被父组件调用）v-model能取到的值，event说，我emit ‘cc’ 的时候，参数的值就是父组件v-model收到的值。
		prop: 'tabsType',
		event: 'change'
	},
	computed: {},
	methods: {
		tabChange(value) {
			this.$emit('change', value);
		}
	}
};
</script>

<style scoped lang="less">
.tabTags {
	color: #7e848a;
	padding: 36px;
	/deep/ .ant-tag {
		cursor: pointer;
		background: #fafbff;
		box-shadow: 0px 3px 6px rgba(117, 138, 165, 0.1);

		font-size: 16px;
	}
}
</style>
